<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财政部财政收支数据可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
            margin-bottom: 30px;
        }
        .header h1 {
            margin: 0;
            color: #333;
            font-weight: normal;
        }
        .header p {
            margin: 10px 0 0;
            color: #666;
            font-size: 14px;
        }
        .filter-section {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        .filter-item {
            display: flex;
            align-items: center;
        }
        .filter-item label {
            margin-right: 10px;
            font-size: 14px;
        }
        .filter-item select {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .section-title {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            font-size: 18px;
            font-weight: normal;
            color: #333;
        }
        .fiscal-overview {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .overview-card {
            flex: 0 0 48%;
            padding: 20px;
            margin-bottom: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .overview-card h3 {
            margin-top: 0;
            font-size: 16px;
            color: #666;
            font-weight: normal;
        }
        .overview-card .amount {
            font-size: 24px;
            color: #333;
            margin: 10px 0;
        }
        .overview-card .growth {
            font-size: 14px;
            color: #999;
        }
        .chart-container {
            height: 400px;
            margin-top: 20px;
        }
        .chart-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .chart-col {
            flex: 0 0 48%;
        }
        .chart-half {
            height: 300px;
        }
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .data-table th,
        .data-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            text-align: left;
        }
        .data-table th {
            background-color: #f9f9f9;
            font-weight: normal;
            color: #666;
        }
        .data-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .data-table td.positive {
            color: #4CAF50;
        }
        .data-table td.negative {
            color: #F44336;
        }
        .data-source {
            margin-top: 30px;
            padding-top: 10px;
            border-top: 1px solid #eee;
            text-align: right;
            font-size: 12px;
            color: #999;
        }
        .green {
            color: #4CAF50;
        }
        .red {
            color: #F44336;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>财政部财政收支数据可视化</h1>
            <p>数据来源：中华人民共和国财政部官方网站</p>
        </div>
        
        <div class="filter-section">
            <div class="filter-item">
                <label>选择数据类型：</label>
                <select id="data-type">
                    <option value="all" selected>所有数据</option>
                    <option value="revenue">财政收入</option>
                    <option value="expenditure">财政支出</option>
                </select>
            </div>
            <div class="filter-item">
                <label>选择数据周期：</label>
                <select id="data-period">
                    <option value="monthly">月度数据</option>
                    <option value="yearly">年度数据</option>
                </select>
            </div>
        </div>
        
        <div class="section">
            <h2 class="section-title">财政收支概览</h2>
            <div class="fiscal-overview">
                <div class="overview-card">
                    <h3>一般公共预算收入</h3>
                    <div class="amount">60877亿元</div>
                    <div class="growth">同比下降 <span class="red">2.3%</span></div>
                </div>
                <div class="overview-card">
                    <h3>一般公共预算支出</h3>
                    <div class="amount">69856亿元</div>
                    <div class="growth">同比增长 <span class="green">2.9%</span></div>
                </div>
                <div class="overview-card">
                    <h3>政府性基金预算收入</h3>
                    <div class="amount">10394亿元</div>
                    <div class="growth">同比增长 <span class="green">7.5%</span></div>
                </div>
                <div class="overview-card">
                    <h3>政府性基金预算支出</h3>
                    <div class="amount">17798亿元</div>
                    <div class="growth">同比增长 <span class="green">15.5%</span></div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <h2 class="section-title">财政收入分析</h2>
            <div class="chart-row">
                <div class="chart-col">
                    <h3>收入构成</h3>
                    <div id="revenue-composition-chart" class="chart-half"></div>
                </div>
                <div class="chart-col">
                    <h3>税收收入占比</h3>
                    <div id="tax-composition-chart" class="chart-half"></div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <h2 class="section-title">主要财税收入</h2>
            <div id="main-revenue-chart" class="chart-container"></div>
        </div>
        
        <div class="section">
            <h2 class="section-title">财政支出分析</h2>
            <div class="chart-row">
                <div class="chart-col">
                    <h3>支出构成</h3>
                    <div id="expenditure-composition-chart" class="chart-half"></div>
                </div>
                <div class="chart-col">
                    <h3>民生支出占比</h3>
                    <div id="social-expenditure-chart" class="chart-half"></div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <h2 class="section-title">政府性基金预算</h2>
            <div id="fund-budget-chart" class="chart-container"></div>
        </div>
        
        <div class="section">
            <h2 class="section-title">原始数据</h2>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>收入项目</th>
                        <th>金额（亿元）</th>
                        <th>同比增长（%）</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>一般公共预算收入</td>
                        <td>60877</td>
                        <td class="negative">-2.3</td>
                    </tr>
                    <tr>
                        <td>税收收入</td>
                        <td>49372</td>
                        <td class="negative">-5.4</td>
                    </tr>
                    <tr>
                        <td>非税收入</td>
                        <td>11705</td>
                        <td class="positive">+10.1</td>
                    </tr>
                    <tr>
                        <td>增值税</td>
                        <td>22048</td>
                        <td class="negative">-7.1</td>
                    </tr>
                    <tr>
                        <td>国内消费税</td>
                        <td>1111</td>
                        <td class="positive">+10</td>
                    </tr>
                    <tr>
                        <td>企业所得税</td>
                        <td>11780</td>
                        <td class="positive">+1</td>
                    </tr>
                    <tr>
                        <td>个人所得税</td>
                        <td>4740</td>
                        <td class="positive">+5</td>
                    </tr>
                    <tr>
                        <td>进口货物增值税、消费税</td>
                        <td>4453</td>
                        <td class="negative">-3.7</td>
                    </tr>
                    <tr>
                        <td>关税</td>
                        <td>357</td>
                        <td class="negative">-0.5</td>
                    </tr>
                    <tr>
                        <td>出口退税减免税</td>
                        <td>1364</td>
                        <td class="positive">+7.3</td>
                    </tr>
                    <tr>
                        <td>城市维护建设税</td>
                        <td>700</td>
                        <td class="positive">+10.3</td>
                    </tr>
                </tbody>
            </table>
            
            <div class="data-source">
                <p>数据来源：2024年一季度财政收支情况</p>
                <p>发布日期：2024-05-22</p>
                <a href="#" id="download-data">查看原始数据</a>
            </div>
        </div>
    </div>

    <script>
        // 初始化所有图表
        document.addEventListener('DOMContentLoaded', function() {
            // 收入构成图表
            var revenueChart = echarts.init(document.getElementById('revenue-composition-chart'));
            var revenueOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['税收收入', '非税收入']
                },
                series: [
                    {
                        name: '收入构成',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 49372, name: '税收收入'},
                            {value: 11705, name: '非税收入'}
                        ]
                    }
                ]
            };
            revenueChart.setOption(revenueOption);
            
            // 税收构成图表
            var taxChart = echarts.init(document.getElementById('tax-composition-chart'));
            var taxOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['增值税', '企业所得税', '个人所得税', '进口货物增值税、消费税', '国内消费税', '其他']
                },
                series: [
                    {
                        name: '税收构成',
                        type: 'pie',
                        radius: ['30%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 22048, name: '增值税'},
                            {value: 11780, name: '企业所得税'},
                            {value: 4740, name: '个人所得税'},
                            {value: 4453, name: '进口货物增值税、消费税'},
                            {value: 1111, name: '国内消费税'},
                            {value: 5240, name: '其他'}
                        ]
                    }
                ]
            };
            taxChart.setOption(taxOption);
            
            // 主要财税收入图表
            var mainRevenueChart = echarts.init(document.getElementById('main-revenue-chart'));
            var mainRevenueOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['金额（亿元）']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['城市维护建设税', '出口退税减免税', '关税', '进口货物增值税、消费税', '个人所得税', '国内消费税', '企业所得税', '增值税']
                },
                series: [
                    {
                        name: '金额（亿元）',
                        type: 'bar',
                        data: [700, 1364, 357, 4453, 4740, 1111, 11780, 22048],
                        itemStyle: {
                            color: function(params) {
                                // 前4项使用红色，后4项使用蓝色
                                return params.dataIndex < 4 ? '#C23531' : '#2F4554';
                            }
                        }
                    }
                ]
            };
            mainRevenueChart.setOption(mainRevenueOption);
            
            // 支出构成图表
            var expenditureChart = echarts.init(document.getElementById('expenditure-composition-chart'));
            var expenditureOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    top: 'center',
                    data: ['教育科学文化卫生', '社会保障和就业', '一般公共服务', '国防', '农林水事务', '城乡社区', '公共安全', '交通运输', '其他']
                },
                series: [
                    {
                        name: '支出构成',
                        type: 'pie',
                        radius: '70%',
                        data: [
                            {value: 16068, name: '教育科学文化卫生'},
                            {value: 12574, name: '社会保障和就业'},
                            {value: 9780, name: '一般公共服务'},
                            {value: 6986, name: '国防'},
                            {value: 5588, name: '农林水事务'},
                            {value: 4191, name: '城乡社区'},
                            {value: 4191, name: '公共安全'},
                            {value: 3493, name: '交通运输'},
                            {value: 6986, name: '其他'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            expenditureChart.setOption(expenditureOption);
            
            // 民生支出占比图表
            var socialChart = echarts.init(document.getElementById('social-expenditure-chart'));
            var socialOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: ['教育', '社会保障和就业', '卫生健康', '住房保障', '其他民生支出', '非民生支出']
                },
                series: [
                    {
                        name: '支出占比',
                        type: 'pie',
                        radius: ['30%', '70%'],
                        data: [
                            {value: 9080, name: '教育'},
                            {value: 12574, name: '社会保障和就业'},
                            {value: 4191, name: '卫生健康'},
                            {value: 2794, name: '住房保障'},
                            {value: 6986, name: '其他民生支出'},
                            {value: 34231, name: '非民生支出'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            socialChart.setOption(socialOption);
            
            // 政府性基金预算图表
            var fundChart = echarts.init(document.getElementById('fund-budget-chart'));
            var fundOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['2024年']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['地方政府专项债券', '国有土地使用权出让', '彩票公益金', '车辆购置税收入']
                },
                series: [
                    {
                        name: '2024年',
                        type: 'bar',
                        data: [9000, 15000, 4500, 7500],
                        itemStyle: {
                            color: '#C23531'
                        }
                    }
                ]
            };
            fundChart.setOption(fundOption);
            
            // 窗口调整时重新计算图表尺寸
            window.addEventListener('resize', function() {
                revenueChart.resize();
                taxChart.resize();
                mainRevenueChart.resize();
                expenditureChart.resize();
                socialChart.resize();
                fundChart.resize();
            });
        });
    </script>
</body>
</html> 